<template lang="">
  <div id="login">
    <video id="login_video" autoplay="autoplay" preload="preload" loop="loop">
      <source src="@/assets/video/welcome.mp4" type="video/mp4" />
    </video>
    <div class="login_main">
      <img :src="getAssetsImages('logo_white.png')" class="login_logo" />
      <div class="login_form">
        <ul>
          <li>
            <span class="icon">
              <i aria-label="图标: team" class="anticon anticon-team">
                <svg
                  viewBox="64 64 896 896"
                  data-icon="team"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                  focusable="false"
                  class=""
                >
                  <path
                    d="M824.2 699.9a301.55 301.55 0 0 0-86.4-60.4C783.1 602.8 812 546.8 812 484c0-110.8-92.4-201.7-203.2-200-109.1 1.7-197 90.6-197 200 0 62.8 29 118.8 74.2 155.5a300.95 300.95 0 0 0-86.4 60.4C345 754.6 314 826.8 312 903.8a8 8 0 0 0 8 8.2h56c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5A226.62 226.62 0 0 1 612 684c60.9 0 118.2 23.7 161.3 66.8C814.5 792 838 846.3 840 904.3c.1 4.3 3.7 7.7 8 7.7h56a8 8 0 0 0 8-8.2c-2-77-33-149.2-87.8-203.9zM612 612c-34.2 0-66.4-13.3-90.5-37.5a126.86 126.86 0 0 1-37.5-91.8c.3-32.8 13.4-64.5 36.3-88 24-24.6 56.1-38.3 90.4-38.7 33.9-.3 66.8 12.9 91 36.6 24.8 24.3 38.4 56.8 38.4 91.4 0 34.2-13.3 66.3-37.5 90.5A127.3 127.3 0 0 1 612 612zM361.5 510.4c-.9-8.7-1.4-17.5-1.4-26.4 0-15.9 1.5-31.4 4.3-46.5.7-3.6-1.2-7.3-4.5-8.8-13.6-6.1-26.1-14.5-36.9-25.1a127.54 127.54 0 0 1-38.7-95.4c.9-32.1 13.8-62.6 36.3-85.6 24.7-25.3 57.9-39.1 93.2-38.7 31.9.3 62.7 12.6 86 34.4 7.9 7.4 14.7 15.6 20.4 24.4 2 3.1 5.9 4.4 9.3 3.2 17.6-6.1 36.2-10.4 55.3-12.4 5.6-.6 8.8-6.6 6.3-11.6-32.5-64.3-98.9-108.7-175.7-109.9-110.9-1.7-203.3 89.2-203.3 199.9 0 62.8 28.9 118.8 74.2 155.5-31.8 14.7-61.1 35-86.5 60.4-54.8 54.7-85.8 126.9-87.8 204a8 8 0 0 0 8 8.2h56.1c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5 29.4-29.4 65.4-49.8 104.7-59.7 3.9-1 6.5-4.7 6-8.7z"
                  ></path>
                </svg>
              </i>
            </span>
            <input
              type="text"
              placeholder="没有推荐的经销商可不填写"
              maxlength="8"
              v-model="formData.invite_code"
            />
          </li>
          <li>
            <span class="icon">
              <i class="anticon anticon-user">
                <svg
                  viewBox="64 64 896 896"
                  data-icon="user"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                  focusable="false"
                  class=""
                >
                  <path
                    d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
                  ></path>
                </svg>
              </i>
            </span>
            <input
              type="text"
              v-model="formData.user_name"
              :placeholder="$t('yong-1')"
              maxlength="10"
              onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
            />
            <p class="red" style="display: none">{{ $t("qing-4") }}</p>
          </li>
          <li>
            <span class="icon">
              <i class="anticon anticon-lock">
                <svg
                  viewBox="64 64 896 896"
                  data-icon="lock"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                  focusable="false"
                  class=""
                >
                  <path
                    d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 1 0-56 0z"
                  ></path>
                </svg>
              </i>
            </span>
            <input
              v-model="formData.password"
              type="password"
              :placeholder="$t('miMa-1')"
              maxlength="15"
              onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
            />
            <p class="red" style="display: none">{{ $t("qing-5") }}</p>
          </li>
          <li>
            <span class="icon">
              <i class="anticon anticon-lock">
                <svg
                  viewBox="64 64 896 896"
                  data-icon="lock"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                  focusable="false"
                  class=""
                >
                  <path
                    d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 1 0-56 0z"
                  ></path>
                </svg>
              </i>
            </span>
            <input
              v-model="formData.confirm_password"
              type="password"
              :placeholder="$t('qing-6')"
              maxlength="15"
              onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
            />
            <p class="red" style="display: none">{{ $t("815G") }}</p>
            <p class="red" style="display: none">{{ $t("miMa-2") }}</p>
          </li>
          <li>
            <a-row>
              <a-col :span="18">
                <a-input
                  v-model:value="formData.captcha_code"
                  style="width: 100%"
                  :placeholder="$t('qing-3')"
                />
              </a-col>
              <a-col :span="6" style="background-color: #fff">
                <img
                  v-if="verifyImgUrl"
                  @click="changeVerifyImageUrl"
                  style="height: 40px; width: 100px"
                  :src="verifyImgUrl"
                />
              </a-col>
            </a-row>
          </li>
          <li style="cursor: pointer; text-align: left">
            <a-checkbox v-model:checked="checked"></a-checkbox>
            {{ $t("woYi") }}<span class="primary_color">{{ $t("fuWu") }}</span
            >{{ $t("key-1") }}
          </li>
          <li style="margin-bottom: 16px">
            <a-button type="primary" size="large" @click="submitRegister">{{
              $t("zhuC")
            }}</a-button>
          </li>
          <li>
            {{ $t("yiYo")
            }}<a class="primary_color" @click="gotoLoginPage">{{
              $t("qing-7")
            }}</a>
          </li>
        </ul>
        <!-- <div class="login_service">
          <img src="">
          {{ $t('lian-4') }}
        </div> -->
      </div>
    </div>
    <div class="ant-spin ant-spin-spinning" style="display: none">
      <span class="ant-spin-dot ant-spin-dot-spin">
        <i class="ant-spin-dot-item"></i>
        <i class="ant-spin-dot-item"></i>
        <i class="ant-spin-dot-item"></i>
        <i class="ant-spin-dot-item"></i>
      </span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import { getLoginCaptchaId, userRegister } from "@/api/account";
import { reactive, ref, unref, watch, onBeforeMount } from "vue";
import { generateMd5, getAssetsImages } from "@/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const route = useRoute();
const verifyImgUrl = ref<string>("");
const captcha_id = ref<string>("");
const checked = ref<boolean>(true);
const buildParameter = () => {
  return {
    invite_code: "",
    captcha_id: "",
    captcha_code: "",
    user_name: "",
    password: "",
    confirm_password: "",
  };
};

const router = useRouter();

let formData = reactive(buildParameter());
watch(
  () => route.query.code,
  (newVal) => {
    if (newVal) {
      formData.invite_code = newVal.toString();
    }
  },
  {
    deep: true
  }
);
onBeforeMount(() => {
  getVerifyImageUrl();
  formData.invite_code = route.query.code?.toString() || "";
});

const getVerifyImageUrl = async () => {
  getLoginCaptchaId().then((res: any) => {
    if (res?.captcha_id) {
      captcha_id.value = res?.captcha_id as string;
      const url = `${
        import.meta.env.VITE_API_BASEPATH
      }/api/v1/admin/login.captcha?id=${res.captcha_id}&reload=false`;
      verifyImgUrl.value = url;
    }
  });
};

function changeVerifyImageUrl() {
  getVerifyImageUrl();
}
function gotoLoginPage() {
  router.push("/login");
}
function submitRegister() {
  if (!formData.user_name) {
    message.warn(t("qing-1"));
    return;
  }

  if (!formData.password || !formData.confirm_password) {
    message.warn(t("qing-2"));
    return;
  }

  if (formData.password.length < 8 && formData.confirm_password.length < 8) {
    message.warn(t("miMa-0"));
    return;
  }

  if (formData.password !== formData.confirm_password) {
    message.warn(t("liang"));
    return;
  }

  if (!formData.captcha_code) {
    message.warn(t("qing-3"));
    return;
  }

  const data = {
    ...formData,
    password: generateMd5(formData.password),
    confirm_password: generateMd5(formData.confirm_password),
    captcha_id: captcha_id.value,
  };

  userRegister(data).then((res: any) => {
    message.success(t("zhang"));

    // 跳转到登录页面
    Object.assign(formData, buildParameter());
    gotoLoginPage();
  });
}
</script>
<style lang="less">
@import url("../../styles/login.less");
</style>
